<template>
  <div class="app-container">

    <el-row :gutter="24">
      <el-col :span="7">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="mini" label-width="100px">
          <el-form-item label="排片名称" prop="pian_name">
            <el-input v-model="ruleForm.pian_name" style="width: 220px;"/>
          </el-form-item>
          <el-form-item label="影片名" prop="film_id">
            <el-select
              v-model="ruleForm.film_id"
              :remote-method="remoteMethod"
              :loading="loading"
              filterable
              remote
              style="width: 220px;"
              reserve-keyword
              placeholder="请输入关键词">
              <el-option
                v-for="item in filmList"
                :key="item.id"
                :label="item.film_name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="影厅" prop="ting_id">
            <el-select
              v-model="ruleForm.ting_id"
              :disabled="!isAdd"
              :remote-method="remoteMethod2"
              :loading="loading"
              filterable
              style="width: 220px;"
              remote
              reserve-keyword
              placeholder="请输入关键词"
              @change="tingChangeClicked">
              <el-option
                v-for="item in tingList"
                :key="item.id"
                :label="item.ting_name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="播放时间" style="width: 150px;" prop="play_time">
            <el-date-picker
              v-model="ruleForm.play_time"
              value-format="timestamp"
              type="datetime"
              placeholder="选择播放时间"/>
          </el-form-item>
          <el-form-item label="票价">
            <el-input-number v-model="ruleForm.price" :step="1" style="width: 220px;"/>
          </el-form-item>
          <el-form-item label="操作人" prop="operation_account">
            <el-input :disabled="true" v-model="ruleForm.operation_account" style="width: 220px;"/>
          </el-form-item>
          <el-form-item label="票头编号" prop="pian_num">
            <el-input :disabled="true" v-model="ruleForm.pian_num" style="width: 220px;"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="17">
        <seats :is-action="false" :ting-data="checkedTingData"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { searchFetchList as searchFilmFetchList } from '@/api/film'
import { searchFetchList as searchTingFetchList } from '@/api/ting'
import { add, update } from '@/api/pian'
import moment from 'moment'

import Seats from '../../components/seats/index.vue'

export default {
  components: { Seats },
  data() {
    const user = this.$store.state.user
    console.info(user.name)
    return {
      checkedTingData: [],
      ruleForm: {
        pian_name: '',
        film_id: null,
        ting_id: null,
        play_time: '',
        price: 0,
        buy_data: '',
        operation_account: user.name,
        pian_num: '0683000237149'
      },
      rules: {
        pian_name: [
          { required: true, message: '请输入排片名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        film_id: [
          { required: true, type: 'string', message: '请选择影片', trigger: 'change' }
        ],
        ting_id: [
          { required: true, type: 'string', message: '请选择影厅', trigger: 'change' }
        ],
        play_time: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        operation_account: [
          { required: true, message: '请输入操作人员名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        pian_num: [
          { required: true, message: '请输入票号前缀编码', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ]
      },
      filmList: [],
      tingList: [],
      loading: false,
      isAdd: true
    }
  },
  created() {
    const params = this.$route.params
    if (params.id) {
      this.isAdd = false
      this.tingList.push(params.ting)
      this.filmList.push(params.film)
      this.checkedTingData = JSON.parse(params.ting.ting_data)
      params.play_time = new Date(params.play_time)
      this.ruleForm = params
      console.info(params)
    }
  },
  methods: {

    tingChangeClicked(e) {
      console.info(e)
      for (var i in this.tingList) {
        if (this.tingList[i].id === e) {
          this.checkedTingData = JSON.parse(this.tingList[i].ting_data)
        }
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var nowTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
          debugger
          if (this.isAdd) {
            this.ruleForm.create_time = nowTime
            add(this.ruleForm).then(response => {
              this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
                // eslint-disable-next-line no-undef
                if (this.affixTags.some(tag => tag.path === view.path)) {
                  return
                }
                this.toLastView(visitedViews)
              })
              this.$router.push({ path: '/pian/list?' + +new Date() })
            })
          } else {
            this.ruleForm.update_time = nowTime
            this.ruleForm.play_time = new Date(this.ruleForm.play_time).getTime()
            update(this.ruleForm).then(response => {
              this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
                // eslint-disable-next-line no-undef
                if (this.affixTags.some(tag => tag.path === view.path)) {
                  return
                }
                this.toLastView(visitedViews)
              })
              this.$router.push({ path: '/pian/list?' + +new Date() })
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    remoteMethod(keyword) {
      searchFilmFetchList({ keyword: keyword }).then(response => {
        this.filmList = response.data.data.list
      })
    },

    remoteMethod2(keyword) {
      searchTingFetchList({ keyword: keyword }).then(response => {
        this.tingList = response.data.data.list
      })
    }
  }
}
</script>

<style lang="css">
  .search-row{
    padding: 10px 0px;
  }
</style>

